<script lang="ts" setup name="GlMapArea">
// import AMapLoader from '@amap/amap-jsapi-loader'
import { ElDialog } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['update:modelValue'])
const showModal = toRef(props, 'modelValue')

watch(() => props.modelValue, val => {
  showModal.value = val
})
</script>

<template>
  <el-dialog
    v-model="showModal"
    title="选择地图范围"
    append-to-body
    align-center
    custom-class="iking-amap-area"
  >
    <div id="amap-area">
      <iframe src="http://datav.aliyun.com/portal/school/atlas/area_selector"></iframe>
    </div>
  </el-dialog>
</template>

<style lang="scss" scopde>
.iking-amap-area {
  height: 93vh;
  width: 83vw;

  .el-dialog__header {
  }

  .el-dialog__body {
    height: 673px;
    width: 100%;
    color: #e9e9e9;
    padding: 0;

    #amap-area {
      height: 100%;
      width: 100%;
      overflow: hidden;
      position: relative;

      iframe {
        height: 884px;
        width: 102%;
        position: absolute;
        top: -139px;
        right: -26px;
        overflow: hidden;
      }
    }
  }

  .el-dialog__footer {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
</style>
